Adwaita: first round at osd revamp

...buttons, gtkscale and toolbars, more to follow...

diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss
index 23435b09c66315c62ac198b568f39006e05ed5a8..b560717cae89d349405f9708c01798703528aaaa 100644 (file)
--- a/gtk/resources/theme/Adwaita/_colors.scss
+++ b/gtk/resources/theme/Adwaita/_colors.scss
@@ -20,9 +20,10 @@ $error_color: #cc0000;
 $success_color: if($variant =='light', #73d216, darken(#73d216,10%));
 $destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
 
-$osd_fg_color: #fff;
-$osd_bg_color: transparentize(#000,0.4);
-$osd_borders_color: transparentize(#666,0.2);
+$osd_fg_color: #eeeeec;
+$osd_bg_color: #2e3436;
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize(white, 0.9);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 063918d3d4fbe1d930fc446cdc83a29edd59f67a..43e8e68e0230298180b48be0eea08d356c2b63ac 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -135,12 +135,12 @@ GtkLabel {
   &:selected,
   &:selected:focus,
   &:selected:hover,
-  &:backdrop:selected {
-    @extend %selected_items;
-  }
   &:insensitive {
     color: $insensitive_fg_color;
   }
+  &:backdrop:selected {
+    @extend %selected_items;
+  }
 }
 
 .dim-label {
@@ -160,6 +160,11 @@ GtkAssistant {
   }
 }
 
+.osd {
+  color: $osd_fg_color;
+  text-shadow: 0 1px black;
+  &:backdrop { text-shadow: none; }
+}
 
 /*********************
  * Spinner Animation *
@@ -322,10 +327,6 @@ $_dot_color: if($variant=='light', $selected_bg_color,
       @include button(backdrop-insensitive-active);
     }
   }
-  //&:selected, &.flat:selected,       Why this?
-  //&:selected:focus, &.flat:focus {
-  //  @extend %selected_items;
-  //}
   &:insensitive {
     @include button(insensitive);
     &:active, &.flat:active,
@@ -338,36 +339,52 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   }
   // big standalone buttons like in Documents pager
   &.osd {
-    border-radius: 6px;
-    padding: 12px;
-    border-width: 1px 1px 2px 1px;
+    &.image-button { padding: 13px; }
     color: $osd_fg_color;
-    text-shadow: none;
-    icon-shadow: none;
+    border-radius: 6px;
+    outline-color: transparentize($osd_fg_color, 0.8);
     @include button(osd);
-    &:hover { @include button(osd-hover); }
-    &:active, &:checked { @include button(osd-active); }
-    &:insensitive { @include button(osd-insensitive); }
-    &:backdrop { @include button(osd-backdrop); }
+    border-color: $osd_outer_borders_color;
+    box-shadow: none;
+    &:hover {
+      @include button(osd-hover);
+      border-color: $osd_outer_borders_color;
+      box-shadow: none;
+    }
+    &:active, &:checked {
+      @include button(osd-active);
+      border-color: $osd_outer_borders_color;
+      box-shadow: none
+    }
+    &:insensitive, &:backdrop:insensitive {
+      @include button(osd-insensitive);
+      border-color: $osd_outer_borders_color;
+      // FIXME: if this state actually exists we should probably make the button
+      //        disappear
+    }
+    &:backdrop {
+      @include button(osd-backdrop);
+      border-color: $osd_outer_borders_color;
+    }
   }
   //overlay / OSD style
   .osd & {
-    padding: 6px;
-    border-width: 1px 1px 2px 1px;
+    // FIXME: for some reason I can't figure out the bookmark button in gnome documents
+    //        gets borders radius 0, when they get backdrop and another state
+    border-width: 1px;
     color: $osd_fg_color;
+    outline-color: transparentize($osd_fg_color, 0.8);
     @include button(osd);
-    text-shadow: none;
-    icon-shadow: none;
     @extend %linked;
     &:hover {
       @include button(osd-hover);
       @extend %linked;
     }
-    &:active, &:checked {
+    &:active, &:checked, &:backdrop:active, &:backdrop:checked {
       @include button(osd-active);
       @extend %linked;
     }
-    &:insensitive {
+    &:insensitive, &:backdrop:insensitive {
       @include button(osd-insensitive);
       @extend %linked;
     }
@@ -397,6 +414,26 @@ $_dot_color: if($variant=='light', $selected_bg_color,
       &:insensitive {
         @include button(insensitive);
       }
+      .osd & {
+        @include button(osd, $b_color);
+        @extend %linked;
+        &:hover {
+          @include button(osd-hover, $b_color);
+          @extend %linked;
+        }
+        &:active, &:checked, &:backdrop:active, &:backdrop:checked {
+          @include button(osd-active, $b_color);
+          @extend %linked;
+        }
+        &:insensitive, &:backdrop:insensitive {
+          @include button(osd-insensitive, $b_color);
+          @extend %linked;
+        }
+        &:backdrop {
+          @include button(osd-backdrop, $b_color);
+          @extend %linked;
+        }
+      }
     }
   }
   &.image-button,
@@ -490,7 +527,6 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   .linked.vertical &:active,
   .linked.vertical &:checked,
   .linked.vertical &:backdrop { @extend %linked_vertical; }
-
 }
 
 // all the following is for the +|- buttons on inline toolbars, that way
@@ -806,10 +842,12 @@ GtkComboBox {
   -GtkWidget-window-dragging: true;
   padding: 4px;
   background-color: $bg_color;
-  .osd & {
-    background-color: $osd_bg_color;
+  .osd &, &.osd {
+    padding: 13px;
+    border: $osd_outer_borders_color;
     border-radius: 6px;
-    padding: 12px;
+    background-color: transparentize($osd_bg_color, 0.3);
+    background-clip: padding-box;
   }
 }
 
@@ -1200,14 +1238,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
     border-style: none;
     background-color: transparent;
   }
-//  .separator {                         Those props doesn't seem to do anything
-//    font-size: 80%;                    I'll comment these out for now and I'll
-//    font-weight: bold;                 delete if nobody blames me :-)
-//    text-shadow: none;
-//    background-color: transparent;
-//    icon-shadow: none;
-//    border: 0;
-//  }
   .button.flat,
   .button.flat:hover {
     text-shadow: none;
@@ -1808,13 +1838,11 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     }
     //OSD sliders
     .osd & {
-      background-image: none;
-      background-color: opacify($osd_borders_color,1);
-      border-width: 1px;
-      box-shadow: none;
-      border-color: $osd_borders_color;
-      &:hover { border-color: lighten($osd_borders_color,10%); }
-      &:active { border-color: lighten($osd_borders_color,30%); }
+      @include button(osd);
+      background-color: $osd_bg_color;
+      &:hover { @include button(osd-hover); }
+      &:active { @include button(osd-active); }
+      &:backdrop { @include button(osd-backdrop); }
     }
   }
   &.trough {
@@ -1848,16 +1876,32 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       background-color: mix($backdrop_bg_color,$borders_color);
       box-shadow: none;
     }
-    &:backdrop:insensitive, .hilight:backdrop:insensitive {
+    &:backdrop:insensitive, .highlight:backdrop:insensitive {
       border-color: $backdrop_borders_color;
       background-color: $insensitive_bg_color;
     }
     //OSD troughs
     .osd & {
-      background-image: none;
-      border-width: 0;
-      //background-color: $osd_borders_color;
+      border-color: $osd_borders_color;
       box-shadow: none;
+      margin: 9px;
+      &.fine-tune { margin: 7px; }
+      background-color: transparentize($osd_borders_color, 0.2);
+      outline-color: transparentize($osd_fg_color, 0.8);
+      outline-offset: -8px;
+      &.highlight {
+        background-image: none;
+        background-color: $selected_bg_color;
+      }
+      &:insensitive, &:backdrop:insensitive {
+        border-color: transparent;
+        background-color: transparent;
+      }
+      &:backdrop {
+        border-color: $osd_borders_color;
+        background-color: none;
+        background-image: none;
+      }
     }
   }
 }

diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 1ed62cc25b5a6b16e475a25c99ac9d7eb30b10bb..8347d96fba1ec0c4369567fd5a7394350d9dc2ef 100644 (file)
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -139,7 +139,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
-// osd, osd-hover, osd-active, osd-insensitive, undecorated
+// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
   border-style: solid;
 
@@ -299,32 +299,62 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   //
   // normal osd button
   //
-    background-image: linear-gradient(to bottom, $osd_bg_color);
+    $_bg: if($c!=$bg_color, transparentize($c, 0.5),
+                            transparentize($osd_bg_color, 0.3));
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, $_bg);
     border-color: $osd_borders_color;
-    box-shadow: none;
+    box-shadow: inset 0 -1px transparentize(black, 0.7),
+                inset 0 1px transparentize(white, 0.9);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
   }
   @else if $t==osd-hover {
   //
   // active osd button
   //
-    background-image: linear-gradient(to bottom, lighten($osd_bg_color,10%));
+    $_bg: if($c!=$bg_color, transparentize($c, 0.3),
+                            transparentize(lighten($osd_bg_color, 20%), 0.3));
+    color: white;
     border-color: $osd_borders_color;
-    box-shadow: none;
+    background-image: linear-gradient(to bottom, $_bg);
   }
   @else if $t==osd-active {
   //
   // active osd button
   //
-    background-image: linear-gradient(to bottom, lighten($osd_bg_color,20%));
+    $_bg: if($c!=$bg_color, $c, $selected_bg_color);
+    color: white;
     border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $_bg);
     box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
   }
   @else if $t==osd-insensitive {
   //
   // insensitive osd button
   //
-    border-color: $osd_borders_color;
+    $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
     color: $insensitive_fg_color;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $_bg);
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+  }
+  @else if $t==osd-backdrop {
+  //
+  // backdrop osd button
+  //
+    $_bg: if($c!=$bg_color, transparentize($c, 0.5),
+                            transparentize($osd_bg_color, 0.3));
+    background-image: linear-gradient(to bottom, $_bg);
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
   }
   @else if $t==undecorated {
   //

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index db7e3333c67a76e69aa7c0e4a98d63711290d4ca..3e480443d49f67cc229961fbcd4ef0de59b40d3e 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -116,7 +116,7 @@
 .overshoot {
   background-color: rgba(33, 93, 156, 0.2); }
 
-GtkLabel:insensitive {
+GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:insensitive {
   color: #939695; }
 
 .dim-label, .titlebar .subtitle, GtkCalendar.header .subtitle,
@@ -131,6 +131,12 @@ GtkAssistant .sidebar GtkLabel {
 GtkAssistant .sidebar GtkLabel.highlight {
   background-color: #212424; }
 
+.osd {
+  color: #eeeeec;
+  text-shadow: 0 1px black; }
+  .osd:backdrop {
+    text-shadow: none; }
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -360,58 +366,95 @@ GtkAssistant .sidebar GtkLabel.highlight {
       background-image: linear-gradient(to bottom, #2f3333, #323636);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .button.osd {
+    color: #eeeeec;
     border-radius: 6px;
-    padding: 12px;
-    border-width: 1px 1px 2px 1px;
-    color: white;
-    text-shadow: none;
-    icon-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2);
     border-style: solid;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-    border-color: rgba(102, 102, 102, 0.8);
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    border-color: rgba(255, 255, 255, 0.1);
     box-shadow: none; }
+    .button.osd.image-button {
+      padding: 13px; }
     .button.osd:hover {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7));
+      border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
     .button.osd:active, .button.osd:checked {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, #215d9c);
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
-    .button.osd:insensitive {
+    .button.osd:insensitive, .button.osd:backdrop:insensitive {
       border-style: solid;
-      border-color: rgba(102, 102, 102, 0.8);
-      color: #939695; }
+      color: #939695;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1); }
     .button.osd:backdrop {
-      border-style: solid; }
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1); }
   .osd .button {
-    padding: 6px;
-    border-width: 1px 1px 2px 1px;
-    color: white;
+    border-width: 1px;
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.2);
     border-style: solid;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-    border-color: rgba(102, 102, 102, 0.8);
-    box-shadow: none;
-    text-shadow: none;
-    icon-shadow: none; }
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
     .osd .button:hover {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
-    .osd .button:active, .osd .button:checked {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
+    .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
-    .osd .button:insensitive {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, #215d9c);
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .osd .button:insensitive, .osd .button:backdrop:insensitive {
       border-style: solid;
-      border-color: rgba(102, 102, 102, 0.8);
-      color: #939695; }
+      color: #939695;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
     .osd .button:backdrop {
-      border-style: solid; }
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
   .button.suggested-action {
     border-style: solid;
     border-width: 1px;
@@ -462,6 +505,43 @@ GtkAssistant .sidebar GtkLabel.highlight {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+    .osd .button.suggested-action {
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.suggested-action:hover {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.7)); }
+      .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #215d9c);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
+        border-style: solid;
+        color: #939695;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.suggested-action:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .button.destructive-action {
     border-style: solid;
     border-width: 1px;
@@ -512,6 +592,43 @@ GtkAssistant .sidebar GtkLabel.highlight {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+    .osd .button.destructive-action {
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.destructive-action:hover {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.7)); }
+      .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #d51010);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
+        border-style: solid;
+        color: #939695;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.destructive-action:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .button.image-button, .button.image-button {
     padding: 8px; }
   .button.text-button {
@@ -652,23 +769,23 @@ GtkAssistant .sidebar GtkLabel.highlight {
 
 .inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat,
 .inline-toolbar GtkToolButton:backdrop > .button.flat,
-.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
+.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked, .osd .button:insensitive, .osd .button:backdrop:insensitive, .osd .button:backdrop, .osd .button.suggested-action, .osd .button.suggested-action:hover, .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked, .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive, .osd .button.suggested-action:backdrop, .osd .button.destructive-action, .osd .button.destructive-action:hover, .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked, .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive, .osd .button.destructive-action:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
   .inline-toolbar GtkToolButton > .button.flat:dir(rtl),
   .inline-toolbar GtkToolButton:backdrop > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat,
   .inline-toolbar GtkToolButton:backdrop:dir(rtl) > .button.flat,
-  .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
+  .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .osd .button.suggested-action:dir(rtl):hover, .osd .button.suggested-action:dir(rtl):active, .osd .button.suggested-action:dir(rtl):checked, .osd .button.suggested-action:dir(rtl):insensitive, .osd .button.suggested-action:dir(rtl):backdrop, .osd .button.destructive-action:dir(rtl):hover, .osd .button.destructive-action:dir(rtl):active, .osd .button.destructive-action:dir(rtl):checked, .osd .button.destructive-action:dir(rtl):insensitive, .osd .button.destructive-action:dir(rtl):backdrop, .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
     border-radius: 0;
     border-right-style: none;
     border-left-style: solid; }
 
-.osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat,
+.osd .button:first-child, .osd .button.suggested-action:first-child:hover, .osd .button.suggested-action:first-child:active, .osd .button.suggested-action:first-child:checked, .osd .button.suggested-action:first-child:insensitive, .osd .button.suggested-action:first-child:backdrop, .osd .button.destructive-action:first-child:hover, .osd .button.destructive-action:first-child:active, .osd .button.destructive-action:first-child:checked, .osd .button.destructive-action:first-child:insensitive, .osd .button.destructive-action:first-child:backdrop, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:first-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:first-child > .button.flat, GtkComboBox.combobox-entry .entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > .button {
   border-radius: 3px 0 0 3px;
   border-left-style: solid; }
-.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat,
+.osd .button:last-child, .osd .button.suggested-action:last-child:hover, .osd .button.suggested-action:last-child:active, .osd .button.suggested-action:last-child:checked, .osd .button.suggested-action:last-child:insensitive, .osd .button.suggested-action:last-child:backdrop, .osd .button.destructive-action:last-child:hover, .osd .button.destructive-action:last-child:active, .osd .button.destructive-action:last-child:checked, .osd .button.destructive-action:last-child:insensitive, .osd .button.destructive-action:last-child:backdrop, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:last-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:last-child > .button.flat, GtkComboBox.combobox-entry .entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button {
   border-radius: 0 3px 3px 0; }
@@ -677,7 +794,7 @@ GtkAssistant .sidebar GtkLabel.highlight {
   .inline-toolbar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat,
   .inline-toolbar.search-bar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, GtkComboBox.combobox-entry .entry:last-child:dir(rtl), GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) {
     border-right-style: solid; }
-.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat,
+.osd .button:only-child, .osd .button.suggested-action:only-child:hover, .osd .button.suggested-action:only-child:active, .osd .button.suggested-action:only-child:checked, .osd .button.suggested-action:only-child:insensitive, .osd .button.suggested-action:only-child:backdrop, .osd .button.destructive-action:only-child:hover, .osd .button.destructive-action:only-child:active, .osd .button.destructive-action:only-child:checked, .osd .button.destructive-action:only-child:insensitive, .osd .button.destructive-action:only-child:backdrop, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:only-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:only-child > .button.flat, GtkComboBox.combobox-entry .entry:only-child, GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button {
   border-radius: 3px;
@@ -919,10 +1036,12 @@ GtkComboBox {
   -GtkWidget-window-dragging: true;
   padding: 4px;
   background-color: #393f3f; }
-  .osd .toolbar, .osd .inline-toolbar, .osd .search-bar {
-    background-color: rgba(0, 0, 0, 0.6);
+  .osd .toolbar, .osd .inline-toolbar, .osd .search-bar, .toolbar.osd, .osd.inline-toolbar, .osd.search-bar {
+    padding: 13px;
+    border: rgba(255, 255, 255, 0.1);
     border-radius: 6px;
-    padding: 12px; }
+    background-color: rgba(46, 52, 54, 0.7);
+    background-clip: padding-box; }
 
 .inline-toolbar {
   border-width: 0 1px 1px;
@@ -1320,30 +1439,41 @@ GtkTreeView.view.progressbar {
     transition: none; }
   .popover.osd {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: #2e3436;
     border: 1px solid #1c1f1f;
-    color: white; }
+    color: #eeeeec; }
     .popover.osd .button {
       color: white;
       text-shadow: none;
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
       .popover.osd .button:hover {
         border-style: solid;
-        background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-        border-color: rgba(102, 102, 102, 0.8);
-        box-shadow: none; }
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
       .popover.osd .button:active {
         border-style: solid;
-        background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-        border-color: rgba(102, 102, 102, 0.8);
-        box-shadow: none; }
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #215d9c);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
       .popover.osd .button:insensitive {
         border-style: solid;
-        border-color: rgba(102, 102, 102, 0.8);
-        color: #939695; }
+        color: #939695;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
 
 .entry.cursor-handle,
 .cursor-handle {
@@ -2088,19 +2218,41 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     .osd .scale.slider, .osd
     .scale.scale-has-marks-above.scale-has-marks-below.slider, .osd
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
-      background-image: none;
-      background-color: #666666;
-      border-width: 1px;
-      box-shadow: none;
-      border-color: rgba(102, 102, 102, 0.8); }
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black;
+      background-color: #2e3436; }
       .osd .scale.slider:hover, .osd
       .scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
-        border-color: rgba(128, 128, 128, 0.8); }
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
       .osd .scale.slider:active, .osd
       .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
-        border-color: rgba(179, 179, 179, 0.8); }
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #215d9c);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .scale.slider:backdrop, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .scale.trough,
   .scale.scale-has-marks-above.scale-has-marks-below.trough,
   .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
@@ -2141,19 +2293,44 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       border-color: #1e2222;
       background-color: #2a2f2f;
       box-shadow: none; }
-    .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive,
+    .scale.trough:backdrop:insensitive, .scale.trough .highlight:backdrop:insensitive,
     .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
-    .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
-    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive {
       border-color: #1e2222;
       background-color: #323636; }
     .osd .scale.trough, .osd
     .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
-      background-image: none;
-      border-width: 0;
-      box-shadow: none; }
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: none;
+      margin: 9px;
+      background-color: rgba(0, 0, 0, 0.5);
+      outline-color: rgba(238, 238, 236, 0.2);
+      outline-offset: -8px; }
+      .osd .scale.trough.fine-tune, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough.fine-tune, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.fine-tune {
+        margin: 7px; }
+      .osd .scale.trough.highlight, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
+        background-image: none;
+        background-color: #215d9c; }
+      .osd .scale.trough:insensitive, .osd .scale.trough:backdrop:insensitive, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive {
+        border-color: transparent;
+        background-color: transparent; }
+      .osd .scale.trough:backdrop, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
+        border-color: rgba(0, 0, 0, 0.7);
+        background-color: none;
+        background-image: none; }
 
 .scale.scale-has-marks-below {
   -GtkScale-slider-length: 20;
@@ -2510,7 +2687,7 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(201, 203, 201, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected {
+.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected {
   background-color: #215d9c;
   color: white; }
   .view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:selected {

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 5b177f825295cb5d897e4616bb5c9a0fbcc18c00..6322ef288d32f5d17528b2c824ac4b476629cb6f 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -116,7 +116,7 @@
 .overshoot {
   background-color: rgba(74, 144, 217, 0.2); }
 
-GtkLabel:insensitive {
+GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:insensitive {
   color: #8d9091; }
 
 .dim-label, .titlebar .subtitle, GtkCalendar.header .subtitle,
@@ -131,6 +131,12 @@ GtkAssistant .sidebar GtkLabel {
 GtkAssistant .sidebar GtkLabel.highlight {
   background-color: lightgray; }
 
+.osd {
+  color: #eeeeec;
+  text-shadow: 0 1px black; }
+  .osd:backdrop {
+    text-shadow: none; }
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -352,58 +358,95 @@ GtkAssistant .sidebar GtkLabel.highlight {
       background-image: linear-gradient(to bottom, #ebebeb, #f4f4f4);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
   .button.osd {
+    color: #eeeeec;
     border-radius: 6px;
-    padding: 12px;
-    border-width: 1px 1px 2px 1px;
-    color: white;
-    text-shadow: none;
-    icon-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2);
     border-style: solid;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-    border-color: rgba(102, 102, 102, 0.8);
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    border-color: rgba(255, 255, 255, 0.1);
     box-shadow: none; }
+    .button.osd.image-button {
+      padding: 13px; }
     .button.osd:hover {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7));
+      border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
     .button.osd:active, .button.osd:checked {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, #4a90d9);
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
-    .button.osd:insensitive {
+    .button.osd:insensitive, .button.osd:backdrop:insensitive {
       border-style: solid;
-      border-color: rgba(102, 102, 102, 0.8);
-      color: #8d9091; }
+      color: #8d9091;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1); }
     .button.osd:backdrop {
-      border-style: solid; }
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none;
+      border-color: rgba(255, 255, 255, 0.1); }
   .osd .button {
-    padding: 6px;
-    border-width: 1px 1px 2px 1px;
-    color: white;
+    border-width: 1px;
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.2);
     border-style: solid;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-    border-color: rgba(102, 102, 102, 0.8);
-    box-shadow: none;
-    text-shadow: none;
-    icon-shadow: none; }
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
     .osd .button:hover {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
-    .osd .button:active, .osd .button:checked {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
+    .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked {
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
-    .osd .button:insensitive {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, #4a90d9);
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .osd .button:insensitive, .osd .button:backdrop:insensitive {
       border-style: solid;
-      border-color: rgba(102, 102, 102, 0.8);
-      color: #8d9091; }
+      color: #8d9091;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
     .osd .button:backdrop {
-      border-style: solid; }
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
   .button.suggested-action {
     border-style: solid;
     border-width: 1px;
@@ -454,6 +497,43 @@ GtkAssistant .sidebar GtkLabel.highlight {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    .osd .button.suggested-action {
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.suggested-action:hover {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.7)); }
+      .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #4a90d9);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
+        border-style: solid;
+        color: #8d9091;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.suggested-action:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .button.destructive-action {
     border-style: solid;
     border-width: 1px;
@@ -504,6 +584,43 @@ GtkAssistant .sidebar GtkLabel.highlight {
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    .osd .button.destructive-action {
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.destructive-action:hover {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.7)); }
+      .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked {
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #ef2929);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
+        border-style: solid;
+        color: #8d9091;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.destructive-action:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .button.image-button, .button.image-button {
     padding: 8px; }
   .button.text-button {
@@ -644,23 +761,23 @@ GtkAssistant .sidebar GtkLabel.highlight {
 
 .inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat,
 .inline-toolbar GtkToolButton:backdrop > .button.flat,
-.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
+.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked, .osd .button:insensitive, .osd .button:backdrop:insensitive, .osd .button:backdrop, .osd .button.suggested-action, .osd .button.suggested-action:hover, .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked, .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive, .osd .button.suggested-action:backdrop, .osd .button.destructive-action, .osd .button.destructive-action:hover, .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked, .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive, .osd .button.destructive-action:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
   .inline-toolbar GtkToolButton > .button.flat:dir(rtl),
   .inline-toolbar GtkToolButton:backdrop > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat,
   .inline-toolbar GtkToolButton:backdrop:dir(rtl) > .button.flat,
-  .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
+  .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .osd .button.suggested-action:dir(rtl):hover, .osd .button.suggested-action:dir(rtl):active, .osd .button.suggested-action:dir(rtl):checked, .osd .button.suggested-action:dir(rtl):insensitive, .osd .button.suggested-action:dir(rtl):backdrop, .osd .button.destructive-action:dir(rtl):hover, .osd .button.destructive-action:dir(rtl):active, .osd .button.destructive-action:dir(rtl):checked, .osd .button.destructive-action:dir(rtl):insensitive, .osd .button.destructive-action:dir(rtl):backdrop, .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
     border-radius: 0;
     border-right-style: none;
     border-left-style: solid; }
 
-.osd .button:first-child, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat,
+.osd .button:first-child, .osd .button.suggested-action:first-child:hover, .osd .button.suggested-action:first-child:active, .osd .button.suggested-action:first-child:checked, .osd .button.suggested-action:first-child:insensitive, .osd .button.suggested-action:first-child:backdrop, .osd .button.destructive-action:first-child:hover, .osd .button.destructive-action:first-child:active, .osd .button.destructive-action:first-child:checked, .osd .button.destructive-action:first-child:insensitive, .osd .button.destructive-action:first-child:backdrop, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:first-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:first-child > .button.flat, GtkComboBox.combobox-entry .entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > .button {
   border-radius: 3px 0 0 3px;
   border-left-style: solid; }
-.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat,
+.osd .button:last-child, .osd .button.suggested-action:last-child:hover, .osd .button.suggested-action:last-child:active, .osd .button.suggested-action:last-child:checked, .osd .button.suggested-action:last-child:insensitive, .osd .button.suggested-action:last-child:backdrop, .osd .button.destructive-action:last-child:hover, .osd .button.destructive-action:last-child:active, .osd .button.destructive-action:last-child:checked, .osd .button.destructive-action:last-child:insensitive, .osd .button.destructive-action:last-child:backdrop, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:last-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:last-child > .button.flat, GtkComboBox.combobox-entry .entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button {
   border-radius: 0 3px 3px 0; }
@@ -669,7 +786,7 @@ GtkAssistant .sidebar GtkLabel.highlight {
   .inline-toolbar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat,
   .inline-toolbar.search-bar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, GtkComboBox.combobox-entry .entry:last-child:dir(rtl), GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) {
     border-right-style: solid; }
-.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat,
+.osd .button:only-child, .osd .button.suggested-action:only-child:hover, .osd .button.suggested-action:only-child:active, .osd .button.suggested-action:only-child:checked, .osd .button.suggested-action:only-child:insensitive, .osd .button.suggested-action:only-child:backdrop, .osd .button.destructive-action:only-child:hover, .osd .button.destructive-action:only-child:active, .osd .button.destructive-action:only-child:checked, .osd .button.destructive-action:only-child:insensitive, .osd .button.destructive-action:only-child:backdrop, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat,
 .inline-toolbar GtkToolButton:backdrop:only-child > .button.flat,
 .inline-toolbar.search-bar GtkToolButton:backdrop:only-child > .button.flat, GtkComboBox.combobox-entry .entry:only-child, GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button {
   border-radius: 3px;
@@ -911,10 +1028,12 @@ GtkComboBox {
   -GtkWidget-window-dragging: true;
   padding: 4px;
   background-color: #ededed; }
-  .osd .toolbar, .osd .inline-toolbar, .osd .search-bar {
-    background-color: rgba(0, 0, 0, 0.6);
+  .osd .toolbar, .osd .inline-toolbar, .osd .search-bar, .toolbar.osd, .osd.inline-toolbar, .osd.search-bar {
+    padding: 13px;
+    border: rgba(255, 255, 255, 0.1);
     border-radius: 6px;
-    padding: 12px; }
+    background-color: rgba(46, 52, 54, 0.7);
+    background-clip: padding-box; }
 
 .inline-toolbar {
   border-width: 0 1px 1px;
@@ -1314,30 +1433,41 @@ GtkTreeView.view.progressbar {
     transition: none; }
   .popover.osd {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: #2e3436;
     border: 1px solid #a1a1a1;
-    color: white; }
+    color: #eeeeec; }
     .popover.osd .button {
       color: white;
       text-shadow: none;
       border-style: solid;
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6));
-      border-color: rgba(102, 102, 102, 0.8);
-      box-shadow: none; }
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
       .popover.osd .button:hover {
         border-style: solid;
-        background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6));
-        border-color: rgba(102, 102, 102, 0.8);
-        box-shadow: none; }
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
       .popover.osd .button:active {
         border-style: solid;
-        background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6));
-        border-color: rgba(102, 102, 102, 0.8);
-        box-shadow: none; }
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #4a90d9);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
       .popover.osd .button:insensitive {
         border-style: solid;
-        border-color: rgba(102, 102, 102, 0.8);
-        color: #8d9091; }
+        color: #8d9091;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
 
 .entry.cursor-handle,
 .cursor-handle {
@@ -2083,19 +2213,41 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     .osd .scale.slider, .osd
     .scale.scale-has-marks-above.scale-has-marks-below.slider, .osd
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
-      background-image: none;
-      background-color: #666666;
-      border-width: 1px;
-      box-shadow: none;
-      border-color: rgba(102, 102, 102, 0.8); }
+      border-style: solid;
+      background-color: transparent;
+      background-clip: padding-box;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black;
+      background-color: #2e3436; }
       .osd .scale.slider:hover, .osd
       .scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
-        border-color: rgba(128, 128, 128, 0.8); }
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
       .osd .scale.slider:active, .osd
       .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
-        border-color: rgba(179, 179, 179, 0.8); }
+        border-style: solid;
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, #4a90d9);
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .scale.slider:backdrop, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
+        border-style: solid;
+        background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none; }
   .scale.trough,
   .scale.scale-has-marks-above.scale-has-marks-below.trough,
   .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
@@ -2136,19 +2288,44 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       border-color: #a8a8a8;
       background-color: #c7c7c7;
       box-shadow: none; }
-    .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive,
+    .scale.trough:backdrop:insensitive, .scale.trough .highlight:backdrop:insensitive,
     .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
-    .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
+    .scale.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
-    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
+    .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive {
       border-color: #a8a8a8;
       background-color: #f4f4f4; }
     .osd .scale.trough, .osd
     .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
-      background-image: none;
-      border-width: 0;
-      box-shadow: none; }
+      border-color: rgba(0, 0, 0, 0.7);
+      box-shadow: none;
+      margin: 9px;
+      background-color: rgba(0, 0, 0, 0.5);
+      outline-color: rgba(238, 238, 236, 0.2);
+      outline-offset: -8px; }
+      .osd .scale.trough.fine-tune, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough.fine-tune, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.fine-tune {
+        margin: 7px; }
+      .osd .scale.trough.highlight, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
+        background-image: none;
+        background-color: #4a90d9; }
+      .osd .scale.trough:insensitive, .osd .scale.trough:backdrop:insensitive, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive {
+        border-color: transparent;
+        background-color: transparent; }
+      .osd .scale.trough:backdrop, .osd
+      .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, .osd
+      .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
+        border-color: rgba(0, 0, 0, 0.7);
+        background-color: none;
+        background-image: none; }
 
 .scale.scale-has-marks-below {
   -GtkScale-slider-length: 20;
@@ -2505,7 +2682,7 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(84, 89, 90, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected {
+.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected {
   background-color: #4a90d9;
   color: white;
   outline-color: rgba(255, 255, 255, 0.3); }